{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}

    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">


    <script src="{% static 'plugins\jQuery\jquery-2.2.3.min.js' %}"></script>
    <script src="{% static 'plugins/vue1/vue.js' %}"></script>
    <script src="{% static 'layui/layui.js' %}"></script>
    <script type="text/javascript" src="{% static 'ckplayer/ckplayer.js' %}" charset="utf-8"></script>

{% endblock header_tail %}

{% block section_content %}

    <!-- row -->





    <div class="row">
        <div class="col-md-12">
          <!-- Custom Tabs -->
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
{#              <li class="active"><a href="#tab_1" data-toggle="tab">01-项目简介</a></li>#}
              <li class="active"><a href="#tab_1" data-toggle="tab">01-浏览器操作xpath方法</a></li>
              <li><a href="#tab_2" data-toggle="tab">02-静态模板平媒类</a></li>
              <li><a href="#tab_3" data-toggle="tab">03-静态模板论坛类</a></li>
              <li><a href="#tab_4" data-toggle="tab">04-静态模板新闻类</a></li>
              <li><a href="#tab_5" data-toggle="tab">05-配置字段以及修该问题汇总</a></li>
              <li class="dropdown">

                <ul class="dropdown-menu">
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                  <li role="presentation" class="divider"></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                </ul>
              </li>

            </ul>
            <div class="tab-content">
{#              <div class="tab-pane active" id="tab_1">#}
{#                <ul class="timeline">#}
{#            <!-- timeline item -->#}
{#                    <li>#}
{#                      <i class="fa fa-video-camera bg-maroon"></i>#}
{##}
{#                      <div class="timeline-item">#}
{##}
{#                        <h1 class="timeline-header">教 学 视 频</h1>#}
{##}
{#                        <div class="timeline-body">#}
{#                          <div class="embed-responsive embed-responsive-16by9">#}
{#                            <!--<iframe class="embed-responsive-item" src="{% static 'video/vm.mp4' %}"-->#}
{#                                    <!--frameborder="0" allowfullscreen></iframe>-->#}
{#                              <video id="example_video_2" class="video-js vjs-default-skin" controls preload="none" width="1024" height="768"#}
{#                                      poster="http://video-js.zencoder.com/oceans-clip.png"#}
{#                                      data-setup="{}">#}
{#                                    <source src="{% static 'video/01-项目简介.mp4' %}" type='video/mp4' />#}
{#                                    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->#}
{#                                    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->#}
{##}
{#                                </video>#}
{#                          </div>#}
{##}
{#                        </div>#}
{#                        <div class="timeline-footer">#}
{#                        </div>#}
{#                      </div>#}
{#                    </li>#}
{#            <!-- END timeline item -->#}
{#                    <li>#}
{#                      <i class="fa fa-clock-o bg-gray"></i>#}
{#                    </li>#}
{#                </ul>#}
{#              </div>#}
              <!-- /.tab-pane -->
              <div class="tab-pane active" id="tab_1">
                <ul class="timeline">
            <!-- timeline item -->
                    <li>
                      <i class="fa fa-video-camera bg-maroon"></i>

                      <div class="timeline-item">

                        <h1 class="timeline-header">教 学 视 频</h1>

                        <div class="timeline-body">
                          <div class="embed-responsive embed-responsive-16by9">
                            <!--<iframe class="embed-responsive-item" src="{% static 'video/vm.mp4' %}"-->
                                    <!--frameborder="0" allowfullscreen></iframe>-->
                              <video id="example_video_2" class="video-js vjs-default-skin" controls preload="none" width="1024" height="768"
                                      poster="http://video-js.zencoder.com/oceans-clip.png"
                                      data-setup="{}">
                                    <source src="{% static 'video/02-浏览器操作xpath方法.mp4' %}" type='video/mp4' />
                                    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
                                    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->

                                </video>
                          </div>

                        </div>
                        <div class="timeline-footer">
                        </div>
                      </div>
                    </li>
            <!-- END timeline item -->
                    <li>
                      <i class="fa fa-clock-o bg-gray"></i>
                    </li>
                </ul>
              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_2">
                <ul class="timeline">
            <!-- timeline item -->
                    <li>
                      <i class="fa fa-video-camera bg-maroon"></i>

                      <div class="timeline-item">

                        <h1 class="timeline-header">教 学 视 频</h1>

                        <div class="timeline-body">
                          <div class="embed-responsive embed-responsive-16by9">
                            <!--<iframe class="embed-responsive-item" src="{% static 'video/vm.mp4' %}"-->
                                    <!--frameborder="0" allowfullscreen></iframe>-->
                              <video id="example_video_3" class="video-js vjs-default-skin" controls preload="none" width="1024" height="768"
                                      poster="http://video-js.zencoder.com/oceans-clip.png"
                                      data-setup="{}">
                                    <source src="{% static 'video/03-静态模板平媒类.mp4' %}" type='video/mp4' />
                                    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
                                    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->

                                </video>
                          </div>

                        </div>
                        <div class="timeline-footer">
                        </div>
                      </div>
                    </li>
            <!-- END timeline item -->
                    <li>
                      <i class="fa fa-clock-o bg-gray"></i>
                    </li>
                </ul>
              </div>
              <div class="tab-pane" id="tab_3">
                <ul class="timeline">
            <!-- timeline item -->
                    <li>
                      <i class="fa fa-video-camera bg-maroon"></i>

                      <div class="timeline-item">

                        <h1 class="timeline-header">教 学 视 频</h1>

                        <div class="timeline-body">
                          <div class="embed-responsive embed-responsive-16by9">
                            <!--<iframe class="embed-responsive-item" src="{% static 'video/vm.mp4' %}"-->
                                    <!--frameborder="0" allowfullscreen></iframe>-->
                              <video id="example_video_4" class="video-js vjs-default-skin" controls preload="none" width="1024" height="768"
                                      poster="http://video-js.zencoder.com/oceans-clip.png"
                                      data-setup="{}">
                                    <source src="{% static 'video/04-静态模板论坛类.mp4' %}" type='video/mp4' />
                                    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
                                    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->

                                </video>
                          </div>

                        </div>
                        <div class="timeline-footer">
                        </div>
                      </div>
                    </li>
            <!-- END timeline item -->
                    <li>
                      <i class="fa fa-clock-o bg-gray"></i>
                    </li>
                </ul>
              </div>
              <div class="tab-pane" id="tab_4">
                <ul class="timeline">
            <!-- timeline item -->
                    <li>
                      <i class="fa fa-video-camera bg-maroon"></i>

                      <div class="timeline-item">

                        <h1 class="timeline-header">教 学 视 频</h1>

                        <div class="timeline-body">
                          <div class="embed-responsive embed-responsive-16by9">
                            <!--<iframe class="embed-responsive-item" src="{% static 'video/vm.mp4' %}"-->
                                    <!--frameborder="0" allowfullscreen></iframe>-->
                              <video id="example_video_5" class="video-js vjs-default-skin" controls preload="none" width="1024" height="768"
                                      poster="http://video-js.zencoder.com/oceans-clip.png"
                                      data-setup="{}">
                                    <source src="{% static 'video/05-静态模板新闻类.mp4' %}" type='video/mp4' />
                                    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
                                    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->

                                </video>
                          </div>

                        </div>
                        <div class="timeline-footer">
                        </div>
                      </div>
                    </li>
            <!-- END timeline item -->
                    <li>
                      <i class="fa fa-clock-o bg-gray"></i>
                    </li>
                  </ul>
              </div>
              <div class="tab-pane" id="tab_5">
                <ul class="timeline">
            <!-- timeline item -->
                    <li>
                      <i class="fa fa-video-camera bg-maroon"></i>

                      <div class="timeline-item">

                        <h1 class="timeline-header">教 学 视 频</h1>

                        <div class="timeline-body">
                          <div class="embed-responsive embed-responsive-16by9">
                            <!--<iframe class="embed-responsive-item" src="{% static 'video/vm.mp4' %}"-->
                                    <!--frameborder="0" allowfullscreen></iframe>-->
                              <video id="example_video_6" class="video-js vjs-default-skin" controls preload="none" width="1024" height="768"
                                      poster="http://video-js.zencoder.com/oceans-clip.png"
                                      data-setup="{}">
                                    <source src="{% static 'video/06-配置字段以及修改问题汇总.mp4' %}" type='video/mp4' />
                                    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
                                    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->

                                </video>
                          </div>

                        </div>
                        <div class="timeline-footer">
                        </div>
                      </div>
                    </li>
            <!-- END timeline item -->
                    <li>
                      <i class="fa fa-clock-o bg-gray"></i>
                    </li>
                  </ul>
            </div>
              <!-- /.tab-pane -->
          </div>
            <!-- /.tab-content -->
        </div>
          <!-- nav-tabs-custom -->
    </div>

<script type="text/javascript">


    function changeColor(id, color) {
        //$(id).parent().parent().parent().children().children().children().find("li[color='green']");
        $(id).parent().parent().addClass("active");
        $(id).children().css("color", color);
    }

    $('#myTasks').addClass("active");
    changeColor("#novice_video", "#00FF7F");
    $('#nav_novice').addClass("active");
</script>


{% endblock section_content %}